<template>
	<view class="exam-list page-padding">
		<view class="item" v-for="(item,index) in examList" :key="index" @click="itemClick(index)">
			<view class="left">
				<view>所属分类:{{item.allClassifyName}}</view>
				<view>创建时间:{{item.createTime}}</view>
			</view>
			<view class="right">
				<view>最佳成绩:{{item.bestAccuracy}}</view>
				<view>花费时间:{{item.spentTime}}s</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		getExamDetailById,
		getExamSimpleInfo
	} from '@/service/modules/personal';

	const pageNum = ref(1)
	const examList = ref([])

	// 下拉刷新
	onPullDownRefresh(async () => {
		pageNum.value = 1
		await getList()
		// 请求成功关闭下拉状态
		uni.stopPullDownRefresh()
		console.log('关闭下拉状态');
	})
	// 上拉触底
	onReachBottom(() => {
		if (examList.value.length % 10 === 0) {
			pageNum.value++
			getList(true)
		} else {
			uni.showToast({
				icon: "error",
				title: "已经到底了哦~"
			})
		}
	})

	onMounted(() => {
		getList()
	})

	const itemClick = (index) => {
		const id = examList.value[index].examId ?? 1
		uni.navigateTo({
			url: '/pages/exam-detail/exam-detail?id=' + id
		})
	}

	const getList = async (isPush) => {
		const res = await getExamSimpleInfo(pageNum.value)
		// 触底要追加数据
		if (isPush) {
			examList.value = examList.value.push(...res.data)
		} else {
			// 这是初次加载或者下拉刷新的赋值情况
			examList.value = res.data
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.exam-list {
		margin-top: 20rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border: 2rpx solid $second-primary-color;
			margin-bottom: 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			color: $text-color;
			font-size: 26rpx;

			.left {
				// flex: 1;
			}

			.right {
				// width: 80rpx;
				// text-align: right;
			}
		}
	}
</style>